
import { useEffect, useState } from 'react';

/**
 * Hook to trigger animation when element is in viewport
 */
export const useInView = (threshold = 0.1) => {
  const [ref, setRef] = useState<HTMLElement | null>(null);
  const [isInView, setIsInView] = useState(false);

  useEffect(() => {
    if (!ref) return;
    
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsInView(entry.isIntersecting);
      },
      { threshold }
    );
    
    observer.observe(ref);
    
    return () => {
      observer.disconnect();
    };
  }, [ref, threshold]);

  return { ref: setRef, isInView };
};

/**
 * Animation variants for staggered animations
 */
export const staggerChildren = (delayChildren = 0.05) => ({
  visible: { 
    transition: { 
      staggerChildren: delayChildren,
    } 
  },
  hidden: {}
});

/**
 * Get a class string based on animation state
 */
export const getAnimationClass = (isInView: boolean, baseClass: string, animationClass: string) => {
  return `${baseClass} ${isInView ? animationClass : 'opacity-0'}`;
};

/**
 * Custom easing functions
 */
export const easings = {
  easeOutQuint: [0.22, 1, 0.36, 1],
  easeInOutQuint: [0.83, 0, 0.17, 1],
  easeOutBack: [0.34, 1.56, 0.64, 1],
};
